<template>
  <div class="shopcard_container">
    <!-- 购物车有数据 -->
    <div class="box" v-if="shopList.length !== 0">
      <div class="item" v-for="(item, index) in shopList" :key="item.Id">
        <div class="img">
          <el-switch v-model="item.status"> </el-switch>
          <img :src="item.imageUrl" alt="" />
        </div>
        <div class="title">{{ item.title }}</div>
        <div class="number">
          <div class="price">￥{{ item.priceStr }}</div>
          <div class="count">
            <div class="count_num">
              <i
                class="el-icon-remove"
                @click="changeCount(item.Id, item.count, -1)"
              ></i>
              <span>{{ item.count }}</span>
              <i
                class="el-icon-circle-plus"
                @click="changeCount(item.Id, item.count, +1)"
              ></i>
            </div>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteShopCard(item.Id)"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车为空 -->
    <div class="gohome" v-else>
      <div class="kong">购物车空空如也</div>
      <el-button type="info" @click="gohome">去商城看看</el-button>
    </div>
    <!-- 底部结算页面 -->
    <div class="footer">
      <div class="footer_item">
        <div class="all">
          <input
            type="checkbox"
            :checked="allChecked"
            @change="changeAll"
          /><span>全选</span>
        </div>
        <div class="total">总价￥{{ totlePrice }}</div>
        <div class="account">
          <el-button type="warning" plain>结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "ShopCard",
  props: [],
  data() {
    return {
      value1: true,
    };
  },
  created() {
    this.getShopList();
  },
  computed: {
    ...mapState(["shopList"]),
    //计算总价
    totlePrice() {
      return this.shopList
        .filter((item) => item.status)
        .reduce(
          (previousValue, currentValue) =>
            previousValue + currentValue.priceStr * currentValue.count,
          0
        );
    },
    //计算全选按钮状态
    allChecked() {
      return this.shopList.every((item) => item.status);
    },
  },
  methods: {
    //获取购物车列表
    getShopList() {
      this.$store.dispatch("getShopList");
    },
    //当购物成为空时，点击去首页
    gohome() {
      this.$router.push("/dashboard");
    },
    //点击全选按钮，改变所有商品状态
    changeAll(e) {
      this.$store.commit("CHANGEALL", e.target.checked);
    },
    //改变商品的个数
    async changeCount(id, num, count) {
      if (count == -1) {
        if (num == 1) return this.$message.info("数量最少为1");
      }
      const res = await this.$store.dispatch("changeCount", { id, count });
      this.getShopList();
      if (res.code !== 1) return this.$message.error("商品数量减少失败");
    },
    //删除购物车
    async deleteShopCard(id) {
      const confirmResult = await this.$confirm(
        "此操作将删除该购物车, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("已取消删除");
      const res = await this.$store.dispatch("deleteShopCard", id);
      if (res.code !== 1) return this.$message.error("删除失败");
      this.$message.success("删除成功");
      this.getShopList();
    },
  },
};
</script>

<style lang="less" scoped>
.shopcard_container {
  margin-top: 40px !important;
  width: 1000px;
  margin: 0 auto;
  padding-bottom: 60px;
  .box {
    .item {
      margin: 10px auto;
      width: 80%;
      height: 120px;
      padding: 0 20px;
      border: 1px solid #000;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img {
        display: flex;
        align-items: center;
        .el-switch {
          margin-right: 10px;
        }
        img {
          width: 100px;
          height: 100px;
        }
      }
      .title {
        width: 300px;
        font-size: 20px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .number {
        .price {
          font-size: 16px;
          color: red;
          font-weight: 900;
        }
        .count {
          display: flex;
          align-items: center;
          .count_num {
            margin-right: 30px;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              min-width: 50px;
              text-align: center;
            }
            i {
              font-size: 30px;
              line-height: 40px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .gohome {
    text-align: center;
    .kong {
      font-weight: 700;
      margin: 10px 0;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #eee;
    .footer_item {
      width: 1000px;
      height: 50px;
      margin: 0 auto;
      font-size: 16px;

      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      .all {
        padding-top: 10px;
        span {
          vertical-align: top;
        }
        input {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
      .total {
        font-size: 20px;
        color: red;
        font-weight: 900;
        padding-top: 10px;
      }
    }
  }
}
</style>